<template>
    <el-row>
        <!-- 选项列表 -->
        <el-col :span="24">
            <Options label="地区" :options="val.regions" />
            <el-divider style="margin: 0;" />
            <Options label="状态" :options="val.states" />
            <el-divider style="margin: 0;" />
            <Options label="类型" :options="val.types" />
            <el-divider style="margin: 0;" />
        </el-col>
        <!-- 全部漫画 -->
        <el-col :span="24" class="comic-card">
            <ul class="list">
                <li v-for="index in 24" :key="index" class="list-card">
                    <n-card title="漫画名">
                        <template #cover>
                            <img src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg">
                        </template>
                        标签类型
                    </n-card>
                </li>
            </ul>
        </el-col>
        <el-col :span="24">
            <n-space vertical>
                <n-pagination v-model:page="page" :page-count="100" show-quick-jumper>
                    <template #goto>
                        跳转至
                    </template>
                </n-pagination>
            </n-space>
        </el-col>
    </el-row>
</template>

<script setup>
// 漫画选项
const val = {
    regions: ['全部', '中国', '日本', '韩国', '欧美'],
    states: ['全部', '连载', '完结'],
    types: ["全部", "纯爱", "魔法", "复仇", "少女", "励志", "竞技", "惊奇", "美食", "穿越", "系统", "欢乐向", "百合", "日常", "热血", "后宫", "浪漫", "玄幻", "纯爱", "耽美", "奇幻", "搞笑", "战斗", "恋爱", "热血", "古风", "校园", "重生", "科幻", "冒险", "魔幻", "都市", "逆袭", "穿越", "少年", "异能", "格斗", "治愈", "悬疑", "战争", "恐怖", "惊悚", "职场"
        , "灵异", "其他"]
}

// 分页
const page = ref(2);
</script>

<style scoped>
.comic-card {
    width: 100%;
    height: fit-content;
}

/* 分页 */
.n-pagination {
    margin: 20px 0;
    justify-content: center;
}
</style>